<template>
  <div
    class="AccountSecurityBox"
    :class="{
      darkW: theme.state.themeState == 'drak',
      lightW: theme.state.themeState == 'light',
    }"
  >
    <div class="AccountSecurityBoxContent">
      <div class="Left">
        <el-affix :offset="70">
          <LeftSidebar :dataMenu="LeftSidebarObjRef" />
        </el-affix>
      </div>
      <div
        class="Content"
        :class="{
          dark: theme.state.themeState == 'drak',
          light: theme.state.themeState == 'light',
        }"
      >
        我是中间dsadsadsad内容
      </div>
      <div class="Right">
        <el-affix :offset="70">
          <LeftSidebar :dataMenu="LeftSidebarObjRef" />
        </el-affix>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { useStore } from "vuex";
import LeftSidebar from "../../../components/LeftSidebar/LeftSidebar.vue";
import RightSidebar from "../../../components/RightSidebar/RightSidebar.vue";
@Options({
  components: {
    LeftSidebar,
    RightSidebar,
  },
})
export default class AccountSecurity extends Vue {
  theme: any = useStore();
  //渲染
  LeftSidebarObjRef = {
    title: "设置",
    menu: [
      {
        id: 0,
        text: "资料设置",
        icon: "icon-yonghuziliaoxiugai",
        type: "EditData",
        link: "/Set/EditData",
      },
      {
        id: 1,
        text: "账号安全",
        icon: "icon-zhanghaoanquan",
        type: "AccountSecurity",
        link: "/Set/AccountSecurity",
      },
      {
        id: 2,
        text: "隐私设置",
        icon: "icon-a-yinsibaohuyanzhengma",
        type: "Privacy",
        link: "/Set/Privacy",
      },
      {
        id: 3,
        text: "消息设置",
        icon: "icon-xiaoxishezhi",
        type: "Message",
        link: "/Set/Message",
      },
      {
        id: 4,
        text: "屏蔽设置",
        icon: "icon-pingbi",
        type: "Shielding",
        link: "/Set/Shielding",
      },
      {
        id: 5,
        text: "使用偏好",
        icon: "icon-xingqudingxiang",
        type: "Preferences",
        link: "/Set/Preferences",
      },
    ],
  };
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("../../../assets/less/global.less");
@import url("./index.less");
</style>